<template>
  <view class="friend-apply-container">
    <!-- 头像与昵称区域 -->
    <view class="avatar-info">
      <image class="avatar" :src="avatarUrl"></image>
      <text class="nickname">{{ nickname }}</text>
    </view>

    <!-- 填写验证信息 -->
    <view class="form-item">
      <text class="label">填写验证信息</text>
      <view class="textarea-container">
        <textarea 
          class="verify-textarea" 
          placeholder="请输入验证信息" 
          v-model="verifyInfo"
          @input="handleTextareaInput"
          maxlength="200"
        ></textarea>
        <view class="textarea-extra">
          <text class="word-count">{{ verifyInfo.length }}/200</text>
          <uni-icons 
            type="trash" 
            size="20" 
            class="clear-icon" 
            @click="clearTextarea"
          ></uni-icons>
        </view>
      </view>
    </view>

    <!-- 设置对方备注 -->
    <view class="form-item">
      <text class="label">设置对方备注</text>
      <input 
        class="remark-input" 
        placeholder="输入备注" 
        v-model="remark"
      />
    </view>

    <!-- 自定义分组选择器 -->
    <view class="form-item">
      <text class="label">分组设置</text>
      <view class="custom-select" @click="toggleGroupSelector">
        <text>{{ selectedGroup || '请选择分组' }}</text>
        <uni-icons 
          type="arrowdown" 
          size="14" 
          :class="isGroupSelectorOpen ? 'rotate-180' : ''"
        ></uni-icons>
      </view>
      
      <!-- 自定义下拉菜单 -->
      <view 
        class="group-selector-popup" 
        v-show="isGroupSelectorOpen"
        @click.stop
      >
        <view 
          class="group-option" 
          v-for="option in groupOptions" 
          :key="option.value"
          :class="{ 'selected': selectedGroup === option.value }"
          @click="selectGroup(option.value, option.text)"
        >
          <text>{{ option.text }}</text>
          <uni-icons 
            type="success" 
            size="14" 
            v-if="selectedGroup === option.value"
          ></uni-icons>
        </view>
      </view>
    </view>
    
    <!-- 底部间距 -->
    <view class="bottom-space"></view>
  </view>
  
  <!-- 发送按钮 -->
  <button class="send-btn fixed-bottom" @click="handleSend">发送</button>
  
  <!-- 遮罩层 -->
  <view 
    class="mask" 
    v-show="isGroupSelectorOpen" 
    @click="closeGroupSelector"
  ></view>
</template>

<script setup>
import { ref, nextTick, onMounted } from 'vue';

// 头像地址
const avatarUrl = ref('/static/logo.png');
// 昵称
const nickname = ref('纸飞机');
// 验证信息
const verifyInfo = ref('');
// 备注
const remark = ref('');
// 分组选择数据
const groupOptions = ref([
  { text: '特别关心', value: '特别关心' },
  { text: '家人', value: '家人' },
  { text: '好友', value: '好友' },
  { text: '同学', value: '同学' },
  { text: '朋友', value: '朋友' }
]);
const selectedGroup = ref('');
// 控制下拉菜单显示状态
const isGroupSelectorOpen = ref(false);

// 生命周期钩子
onMounted(() => {
  console.log('组件已挂载');
});

// 文本域输入事件
const handleTextareaInput = (e) => {
  verifyInfo.value = e.detail.value;
};

// 清除文本域内容
const clearTextarea = () => {
  verifyInfo.value = '';
};

// 切换分组选择器显示状态
const toggleGroupSelector = () => {
  isGroupSelectorOpen.value = !isGroupSelectorOpen.value;
  console.log('分组选择器状态:', isGroupSelectorOpen.value);
};

// 关闭分组选择器
const closeGroupSelector = () => {
  isGroupSelectorOpen.value = false;
};

// 选择分组
const selectGroup = (value, text) => {
  selectedGroup.value = text;
  closeGroupSelector();
  console.log('已选择分组:', value, text);
};

// 发送按钮点击事件
const handleSend = () => {
  console.log('提交数据:');
  console.log('验证信息:', verifyInfo.value);
  console.log('备注:', remark.value);
  console.log('选择的分组:', selectedGroup.value);
  
  // 这里可补充调用后端接口逻辑
};
</script>

<style lang="less" scoped>
.friend-apply-container {
  padding: 15px;
  background-color: #fff;
  padding-bottom: 60px;

  .avatar-info {
    display: flex;
    align-items: center;
    margin-bottom: 20px;

    .avatar {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      margin-right: 10px;
    }

    .nickname {
      font-size: 18px;
      font-weight: bold;
    }
  }

  .form-item {
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;

    .label {
      font-size: 14px;
      color: #999;
      margin-bottom: 5px;
    }
  }

  .textarea-container {
    position: relative;
  }

  .verify-textarea {
    height: 135px;
    border: 1px solid #eee;
    border-radius: 4px;
    padding: 10px 30px 10px 10px;
    font-size: 14px;
    resize: none;
  }

  .textarea-extra {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #999;
  }

  .word-count {
    margin-right: 10px;
  }

  .clear-icon {
    cursor: pointer;
  }

  .remark-input {
    height: 40px;
    border: 1px solid #eee;
    border-radius: 4px;
    padding: 0 10px;
    font-size: 14px;
  }

  /* 自定义选择器样式 */
  .custom-select {
    height: 40px;
    line-height: 40px;
    border: 1px solid #eee;
    border-radius: 4px;
    padding: 0 10px;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    position: relative;
    z-index: 101;
  }

  .rotate-180 {
    transform: rotate(180deg);
    transition: transform 0.3s;
  }

  /* 下拉菜单样式 */
  .group-selector-popup {
    position: absolute;
    left: 15px;
    right: 15px;
    margin-top: 5px;
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 9999;
    max-height: 200px;
    overflow-y: auto;
  }

  .group-option {
    height: 40px;
    line-height: 40px;
    padding: 0 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f5f5f5;
    
    &:last-child {
      border-bottom: none;
    }
    
    &:hover {
      background-color: #f8f8f8;
    }
    
    &.selected {
      color: #007aff;
    }
  }

  /* 遮罩层 */
  .mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 9998;
  }
  
  .bottom-space {
    height: 60px;
  }
}

/* 固定在底部的按钮样式 */
.fixed-bottom {
  position: fixed;
  bottom: 15px;
  left: 15px;
  right: 15px;
  height: 45px;
  line-height: 45px;
  background-color: #007aff;
  color: #fff;
  font-size: 16px;
  border-radius: 32px;
  z-index: 100;
}
</style> 